<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 300px;
      height: 300px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <!--  1. 选择上传的图片文件
        2. 获取到上传的图片文件,携带发送请求给后端
        3. 后端会返回在服务器的图片地址
        4. 前端拿到地址做图片的渲染
可以使用纯前端的方式实现上传图像的预览? 
方式一: 使用URL.createObjectURL生成的路径地址是临时地址, 只要生成这个地址的页面关闭,这个地址也会随之失效
方法二: 文件读取对象 fileReader  使用这种方式实现的路径读取, 地址是永久的, 但是生成的地址会多30%左右
-->

  <input type="file">
  <br>
  <img src="" >
  <!-- <script>
    // 使用URL.createObjectURL生成的路径地址是临时地址, 只要生成这个地址的页面关闭,这个地址也会随之失效
    // 1. 获取dom元素
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    // 2. 监听file的change事件
    ipt.onchange = (e) => {
      // 3. 获取到上传的文件对象
      // console.log(e.target.files[0]) 
      const file = e.target.files[0]
      // 4. 使用 URL.createObjectURL(文件对象) 方法 生成一个地址
      const url = URL.createObjectURL(file)
      console.log(url)
      // 5. 将这个生成的地址交给img标签的src
      img.src = url
      // 6. 清空value保证change事件触发
      e.target.value = null
    }
  </script> -->
  <script>
     // 1. 获取dom元素
     const ipt = document.querySelector('input')
     const img = document.querySelector('img')
      // 2. 监听file的change事件
      ipt.onchange = (e) => {
        // 3. 获取上传的文件对象
        const file = e.target.files[0]
        // 4. 使用FileReader文件读取对象
        const fd = new FileReader()
        // 5. 是的fileReader实例读取文件
        fd.readAsDataURL(file) // 读取url地址
        // fd.readAsText(file) // 读取文本
        // 6. 在onload处理函数中 fd.result方法
        fd.onload = ()=>{
        //  console.log(fd.result) // 读取的结果, 如果是读取的是图片 base64格式的字符串 表示的是这个图片的地址
          //  7. 将地址赋值给img的src 
          img.src = fd.result
          // 8. 清空value保证change事件触发
          e.target.value = null
        }
      }
  </script>

</body>
</html>